<template>
    <div class="inspiration_body">
        <div class="nav">
            <Screen style="margin-right: 12px" :text="item.title" :action="classTxt == item.title"
                :cardShow="item.data.length" @click="handleAction(item.title)" v-for="item in navInfo" :key="item.id"
                :data="item.data"  :classTxt="classTxt"/>
        </div>
        <div class="main">
            <Card2 url="https://www.showjane.com/public/upload/inspiration/2023/04-27/bec9998b5121f912d1cf9409e7faaf09.jpg" title="日用品架-5553A" :tags="['日用百货','超市']" width="414px" :collection="0"/>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getInspiration } from '@/apis/apis.ts'

const handleAction = (txt) => {
    classTxt.value = txt;

}
const navInfo = ref([])
const InspirationInfo = ref([])
const classTxt = ref('全部')
onMounted(async () => {
    let res = await getInspiration()
    navInfo.value = res.nav
    InspirationInfo.value = res.all
    console.log(res);
})

</script>

<style scoped lang="scss">
.inspiration_body {
    width: 1300px;
    margin: 0 auto;

    & .nav {
        display: flex;

    }
    & .main{
        margin-top: 20px;
        margin-bottom: 60px;
    }
}
</style>